<template>
	  <view @click="onOrderDetail(order.id)"  :id="`zp-id-${order.zp_index}`" :key="order.zp_index" v-for="(order,index) in orderList" class="order-card">
	  	<view class="no-box">
			<view class="order-no">
				<u-icon name="order"></u-icon>
				<text class="number">{{ order.no }}</text>
			</view>
			<view class="status">{{order.statusStr}}</view>
		</view> 
		
		<view class="main-box" v-for="item in order.items" :key="item.id">
			<view>
				<u-avatar size="100" :src="order.avatar"></u-avatar>
			</view>
			<view class="right-box">
				<view class="nickname-box">
					<view class="nickname">{{order.nickname}}</view>
					<view class="info">订单时间：{{order.createTimeStr}}</view> 
					<view class="info">服务内容：{{item.spuName}} {{item.properties.map((property) => property.valueName).join(' ')}}×{{item.count}}</view>
					<view class="info" v-if="order.sex == '1'">性别要求：女生</view> 
					<view class="info" v-if="order.sex == '0'">性别要求：男生</view>
					<view class="info" v-if="userInfo.id == order.workerUserId">
						<text class="weixin">微信：{{order.weixin}}</text>
						<view @tap.stop="onCopy(order.weixin)">
							<u-icon name="outline-copy" custom-prefix="iconfont"></u-icon>
						</view>
					</view>
					<view class="info">
						<text>剩余时间：</text>
						<view v-if="order.receiveTime">
							<text v-if="order.end">已结束</text>
							<view v-else>
								<u-count-down :timestamp="order.timestamp" format="DD天HH时mm分ss秒" @end="order.end = true"></u-count-down>
							</view>
						</view>
						<text v-else>暂未接单</text>
					</view>
					<view class="info" v-if="order.userRemark">备注：{{order.userRemark}}</view>
					<view class="info" v-if="order.cancelReason">取消原因：{{order.cancelReason}}</view>
				</view>
				<view class="price-box"> 
					<text class="price">{{order.brokeragePrice}}</text>
					<text>/币</text>
				</view>
			</view>
		</view>
		
		<view class="bottom-box">
			<view class="btn-box">
				<view v-if="order.buttons.includes('other')" class="btn">也被其它店员抢单</view>
				<view v-if="order.buttons.includes('detail')" @tap.stop="onOrderDetail(order.id)" class="btn">查看详情</view>
				<view v-if="order.buttons.includes('unpay')" @tap.stop="onOrderCancel(order.id, order.items[0].id)" class="btn">取消接单</view>
				<view v-if="order.buttons.includes('cancel')" @tap.stop="onCancel(order.id)" class="btn">取消订单</view>
				<view v-if="order.buttons.includes('invite')" @tap.stop="onBuy(order.items[0].spuId)" class="btn active">邀请好友抢单</view>
				<view v-if="order.buttons.includes('invite2')" @tap.stop="onBuy(order.items[0].spuId)" class="btn active">邀请评价</view>
				<view v-if="order.buttons.includes('agree')" @tap.stop="onOrderConfirm(order)" class="btn active">立即抢单</view>
				<view v-if="order.buttons.includes('confirm')" @tap.stop="onConfirm(order)" class="btn active">结束服务</view>
			</view>
		</view>
		
	  </view>
  
</template>

<script>
	import sheep from '@/sheep';
	import dayjs from 'dayjs';
	export default {
		components: {
			
		},
		props: {
			virtualList: {
				type: Array,
				default: [],
			},
		},
		emits: ["onCancel", "onConfirm", "onOrderConfirm"],
		data() {
			return {
				
			}
		},
		computed: {
			userInfo: {
			    get() {
			      return sheep.$store('user').userInfo;
			    },
			},
			orderList() {
				this.virtualList.forEach((order) => order.createTimeStr = sheep.$helper.timeFormat(order.createTime, 'yyyy-mm-dd hh:MM:ss'));
				this.virtualList.forEach((order) => order.timestamp = order.receiveTime ? sheep.$helper.parseTimeData(order.receiveTime) : 0);
				return this.virtualList;
			},
		},
		methods: {
			// 订单详情
			onOrderDetail(id) { 
			  sheep.$router.go('/pages/order/blind/detail', {
			    id,
			  });
			},
			onCancel(orderId) {
			  this.$emit('onCancel', orderId);
			},
			onBuy(id) {
			  sheep.$router.go('/pages/clerk/detail/index', {
				id,
			  });
			},
			// 评价
			onComment(id) { 
			  sheep.$router.go('/pages/goods/comment/worker/add', {
			    id,
			  });
			},
			// 继续支付
			onPay(payOrderId) {
			  sheep.$router.go('/pages/pay/worker/index', {
			    id: payOrderId,
			  });
			},
			onOrderCancel(orderId, itemId) {
			  sheep.$router.go('/pages/order/worker/aftersale/apply', {
				orderId: orderId,
				itemId: itemId
			  });
			},
			onOrderConfirm(order) {
			  this.$emit('onOrderConfirm', order);
			},
			// 复制
			onCopy(text) {
			  sheep.$helper.copyText(text);
			},
			// 确认收货
			onConfirm(order) {
			  this.$emit('onConfirm', order);
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.order-card {
		padding: 10px;
		margin-top: 10px;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		flex: 1;
		
		.no-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 1;
			padding-bottom: 10px;
			color: rgb(100, 101, 102);
			
			.order-no {
				
				.number {
					margin-left: 5px;
					font-size: 22rpx;
				}
			}
			
			.status {
				font-size: 22rpx;
			}
		}
		
		.main-box {
			display: flex;
			padding: 10px 0;
			border-top: 1px solid #fbf0f0;
			border-bottom: 1px solid #fbf0f0;
			margin-bottom: 10px;
			
			.right-box {
				display: flex;
				justify-content: space-between;
				flex: 1;
				align-items: center;
				margin-left: 10px;
				
				.nickname {
					font-size: 12px;
					font-weight: bold;
					margin-bottom: 10px;
				}
				
				.info {
					font-size: 22rpx;
					color: rgb(100, 101, 102);
					line-height: 22rpx;
					margin-bottom: 5px;
					display: flex;
					align-items: center;
					
					.weixin {
						margin-right: 5px;
					}
				}
				
				.price-box {
					font-size: 22rpx;
					color: rgb(100, 101, 102);
					
					.price {
						font-size: 34rpx;
						font-weight: bold;
						color: var(--ui-BG-Main);
					}
				}
			}
		}
		
		.bottom-box {
			display: flex;
			justify-content: flex-end;
			
			.btn-box {
				display: flex;
				align-items: center;
			}
			
			.btn {
				background-color: #ddd;
				color: rgb(100, 101, 102);
				font-size: 22rpx;
				border-radius: 40px;
				padding: 5px 10px;
				margin-left: 10px;
				min-width: 140rpx;
				display: flex;
				justify-content: center;
			}
			
			.active {
				background-color: var(--ui-BG-Main);
				color: #fff;
			}
		}
	}
</style>